<template>
	<view>
		<u-search v-model="type" @custom="searchtype" @search="searchtype"></u-search>
		<view class="serve">
			<scroll-view scroll-y class="left">
				<view class="l1">
					<u-button type="primary" text="车主服务" 
					style="margin-bottom: 20px; margin-top: 20px;" @click="clicktype('车主服务')"></u-button>
					<u-button type="primary" text="生活服务" style="margin-bottom: 20px; margin-top: 20px;" @click="clicktype('生活服务')"></u-button>
					<u-button type="primary" text="便民服务" style="margin-bottom: 20px; margin-top: 20px;" @click="clicktype('便民服务')"></u-button>	
				</view>
			</scroll-view>
			<scroll-view class="right" scroll-y>
				<u-grid col="2">
					<u-grid-item v-for="item in serve" :key="item.id" @click="fuwu">
						<image :src="'http://124.93.196.45:10001'+item.imgUrl" style="width: 50px; height: 50px;"></image>
						<text>{{item.serviceName}}</text>
					</u-grid-item>
				</u-grid>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				allserve:[],
				serve:[],
				type:''
			}
		},
		onLoad() {
			this.getallserve()
		},
		methods: {
			getallserve(){
				this.api.get('/prod-api/api/service/list').then(res=>{
					this.allserve=res.data.rows
					this.serve=res.data.rows
				})
			},
			clicktype(type){
				this.serve=this.allserve.filter((item)=>item.serviceType===type)
			},
			searchtype(){
				if(this.type===''){
					this.serve=this.allserve
				}else{
					this.serve=[]
					for(let i=0;i<this.allserve.length;i++){
						if(this.allserve[i].serviceName.indexOf(this.type)>=0){
							this.serve.push(this.allserve[i])
						}
					}
				}
			},
			fuwu(index){
				if(index===0){
					uni.navigateTo({
						url:'/pages/serve/jiaoyu/jiaoyu'
					})
				}else if(index===1){
					uni.navigateTo({
						url:'/pages/serve/zhengfu/zhengfu'
					})
				}else if(index===2){
					uni.navigateTo({
						url:'/pages/serve/libary/libary'
					})
				}else if(index===3){
					uni.navigateTo({
						url:'/pages/serve/laji/laji'
					})
				}else if(index===4){
					uni.navigateTo({
						url:'/pages/serve/volunteer/volunteer'
					})
				}else if(index===5){
					uni.navigateTo({
						url:'/pages/serve/stop/stop'
					})
				}else if(index===6){
					uni.navigateTo({
						url:'/pages/serve/subway/subway'
					})
				}else if(index===7){
					uni.navigateTo({
						url:'/pages/serve/bus/bus'
					})
				}else if(index===8){
					uni.navigateTo({
						url:'/pages/serve/hospital/hospital'
					})
				}else if(index===9){
					uni.navigateTo({
						url:'/pages/other/traffic/traffic'
					})
				}else if(index===10){
					uni.navigateTo({
						url:'/pages/other/life/life'
					})
				}else if(index===12){
					uni.navigateTo({
						url:'/pages/other/house/house'
					})
				}else if(index===13){
					uni.navigateTo({
						url:'/pages/other/movie/movie'
					})
				}else if(index===14){
					uni.navigateTo({
						url:'/pages/other/work/work'
					})
				}else if(index===15){
					uni.navigateTo({
						url:'/pages/other/active/active'
					})
				}else if(index===16){
					uni.navigateTo({
						url:'/pages/other/pethospital/pethospital'
					})
				}else if(index===17){
					uni.navigateTo({
						url:'/pages/other/wuliu/wuliu'
					})
				}else if(index===18){
					uni.navigateTo({
						url:'/pages/other/aixin/aixin'
					})
				}else if(index===19){
					uni.navigateTo({
						url:'/pages/other/post/post'
					})
				}else if(index===11){
					uni.navigateTo({
						url:'/pages/other/takaway/takaway'
					})
				}
				else{
					uni.navigateTo({
						url:'/pages/other/data/data'
					})
				}
			}
			
		}
	}
</script>

<style lang="scss">
	.serve{
		height: 100%;
		display: flex;
		.left{
			width: 100px;
		}
		.right{
			margin-top: 30px;
			line-height: 55px;
		}
	}
</style>
